<template>
  <div class="main-box">
    <router-view></router-view>
  </div>
</template>

<script>
import { prediction } from "./serve/api";

export default {
  name: "app",

  components: {},

  data() {
    return {};
  },

  created() {
    document.cookie='WAPSESSIONID=6bd9ca4f-67d3-4f9d-a835-d7f92ad54a2c'
  },

  mounted() {},
  watch: {},
  methods: {
    setScatter() {
      let data = [];
      this.xData.forEach((element, index) => {
        data.push([index, this.yData[index]]);
      });

      let option = {
        xAxis: {
          type: "category",
          data: this.xData,
          axisLabel: {
            interval: 0,
          },
        },

        yAxis: {
          type: "value",
        },

        series: [
          {
            symbolSize: 20,
            data: data,
            // data: [
            //   [10.0, 8.04],
            //   [8.07, 6.95],
            //   [13.0, 7.58],
            //   [9.05, 8.81],
            //   [11.0, 8.33],
            //   [14.0, 7.66],
            //   [13.4, 6.81],
            //   [10.0, 6.33],
            //   [14.0, 8.96],
            //   [12.5, 6.82],
            //   [9.15, 7.2],
            //   [11.5, 7.2],
            //   [3.03, 4.23],
            //   [12.2, 7.83],
            //   [2.02, 4.47],
            //   [1.05, 3.33],
            //   [4.05, 4.96],
            //   [6.03, 7.24],
            //   [12.0, 6.26],
            //   [12.0, 8.84],
            //   [7.08, 5.82],
            //   [5.02, 5.68],
            // ],
            type: "scatter",
          },
        ],
      };
      this.chartBox.setOption(option);
    },
    setPie() {
      let legends = this.xData;
      this.pieData = [];
      this.xData.forEach((element, index) => {
        this.pieData.push({
          value: this.yData[index],
          name: this.xData[index],
        });
      });

      let option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(13,5,30,.6)",
          borderWidth: 1,
          borderColor: "#4ddd8f",
          padding: 5,
          textStyle: {
            color: "#333",
          },
          formatter: "{b} : {c} ({d}%)",
        },
        grid: {
          top: "0%",
          left: "2%",
          right: "1%",
          bottom: "0%",
        },
        legend: {
          data: legends,
          orient: "vertical",
          top: "10%",
          right: "0%",
          textStyle: {
            color: "#333",
            fontSize: 12,
          },
        },
        color: [
          "#099EEC",
          "#0673DF",
          "#52BB89",
          "#E8EC81",
          "#F5B229",
          "#C756ED",
        ],
        series: [
          {
            name: "",
            type: "pie",
            radius: ["30%", "58%"],
            center: ["42%", "56%"], // 调节位子
            avoidLabelOverlap: false,
            data: this.pieData,

            label: {
              normal: {
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.5)",
                },
                smooth: 0.2,
                length: 8,
                length2: 6,
              },
            },
            itemStyle: {
              borderRadius: 4,
              borderColor: "transparent",
              borderWidth: 1,
            },
          },
        ],
      };

      this.chartBox.setOption(option);
    },
    setLine() {
      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(13,5,30,.6)",
          borderWidth: 1,
          borderColor: "#4ddd8f",
          padding: 5,
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          itemWidth: 16,
          itemHeight: 12,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          x: "100",
          data: [""],
        },
        grid: {
          top: "17%",
          left: "1%",
          right: "3%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,

            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false,
              length: 4,
              lineStyle: {
                color: "rgba(128,196,255,0.2)",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(128,196,255,0.2)",
              },
            },
            axisLabel: {
              color: "#9ebbed",
              rotate: 0,
              interval: 0,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: "档案合格率",
            nameTextStyle: {
              color: "#9ebbed",
              padding: [0, 0, -5, 0],
            },
            axisLabel: {
              color: "#9ebbed",
            },
            axisTick: {
              show: false,
              length: 4,
              lineStyle: {
                color: "rgba(64,136,254,1)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(128,196,255,0.2)",
                width: 1,
                // type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "line",

            data: this.yData,
          },
        ],
      };

      this.chartBox.setOption(option);
    },
    setBar() {
      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(13,5,30,.6)",
          borderWidth: 1,
          borderColor: "#4ddd8f",
          padding: 5,
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          itemWidth: 16,
          itemHeight: 12,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          x: "100",
          data: [""],
        },
        grid: {
          top: "17%",
          left: "1%",
          right: "3%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.xData,

            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              show: false,
              length: 4,
              lineStyle: {
                color: "rgba(128,196,255,0.2)",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(128,196,255,0.2)",
              },
            },
            axisLabel: {
              color: "#9ebbed",
              rotate: 0,
              interval: 0,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: "档案合格率",
            nameTextStyle: {
              color: "#9ebbed",
              padding: [0, 0, -5, 0],
            },
            axisLabel: {
              color: "#9ebbed",
            },
            axisTick: {
              show: false,
              length: 4,
              lineStyle: {
                color: "rgba(64,136,254,1)",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(128,196,255,0.2)",
                width: 1,
                // type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: 20,
            data: this.yData,
            itemStyle: {
              borderRadius: 0,

              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#00dfff", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0054ff", //   0% 处的颜色
                  },
                ],
              },
            },
          },
        ],
      };

      this.chartBox.setOption(option);
    },
  },
};
</script>

<style lang="less">
@import url('./assets/style/sidebar.scss');
// @font-face {
//   font-family: font1;
//   src: url("./assets/style/字体圈欣意冠黑体3.0.ttf");
// }
.main-box {
  width: 100%;
  height: 100%;

  // .header-box {
  //   width: 100%;
  //   height: 52px;
  //   background: #ffffff;
  //   // background-image: url("./assets/images/logo (4).png");
  //   background-size: 124px 38px;
  //   background-position: 20px center;
  //   background-repeat: no-repeat;
  //   border-bottom: 1px solid #e6edf5;
  // }
  // .content {
  //   width: 100%;
  //   height: calc(100% - 53px);
  //   padding: 20px 30px;
  //   box-sizing: border-box;
  //   color: #333;
  // }
}
</style>
